import React from "react";
import { inject, observer } from "mobx-react";
import { Spin, Table, Button, Modal, Tooltip, Row, Col } from "antd";
import {
  WeaNewScroll,
  WeaLeftRightLayout,
  WeaInputNumber,
  WeaOrgTree,
  WeaCheckbox,
  WeaTools,
  WeaTop,
  WeaSearchGroup,
  WeaFormItem,
  WeaBrowser,
  WeaDateGroup,
  WeaInput,
  WeaSelect,
  WeaRightMenu,
  WeaDialog
} from "ecCom";
import { renderAlertPage,renderLoading,isEmpty,getHeaderObject } from "../../util/Util";

@inject("goalBaseStore")
@observer
export default class GoalBaseSetting extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      menu: [
        {
          key: "0",
          icon: <i className="icon-coms-Save-as" />,
          content: "保存",
          onClick: () => this.doSaveBaseSetting()
        }
      ],
      _height: this.getHeight(),
      heightInit: false,
      params: {
        operation: "",
        goalmaint: "",
        docsecid: "",
        isself: "0",
        iscgoal: "0",
        goalmaintname:"",
      }
    };
  }

  componentDidMount(){
    this.props.onRef(this)
  }
  
  getHeight(header) {
    let h = 0;
    if (header) {
      h = header.clientHeight || 0;
    }
    return window.innerHeight - h;
  }
  render() {
    const { goalBaseStore } = this.props;
    const { loading, hasRight, data } = goalBaseStore;
    const { menu, _height,heightInit } = this.state;
    if(loading){
      return renderLoading();
    }

    if (!hasRight) {
      return renderAlertPage("对不起，您暂时没有权限！");
    }


    let header = getHeaderObject();
    if (header && !heightInit) {
      this.setState({ _height: this.getHeight(header), heightInit: true});
    }
    return (
      <div className="wea-workrelate-task-base" style={{ height: _height }}>
        
       
        <WeaRightMenu datas={menu} showUrlItem={false} style={{height:'100%'}}>
            <WeaSearchGroup title="基本信息" showGroup={true}>
              <Row gutter="2" style={{ margin: "5px 20px 0 10px" }}>
                <Col span={4}>目标维护人</Col>
                <Col span={7}>
                  <WeaBrowser
                    type={17}
                    textDecoration={true}
                    // inputStyle={{ width: 150 }}
                    replaceDatas={
                      this.parseData(data.goalmaint,data.goalmaintname)
                    }
                    onChange={(ids, names, datas) => {
                      this.setState({
                        params:{
                          goalmaint:ids,
                          goalmaintname:names 
                        }
                      })
                      data.goalmaintname = names;
                      data.goalmaint = ids;
                    }}
                    isSingle={false}
                  />
                </Col>
                <Col span={2}></Col>
                <Col span={4}>附件上传目录</Col>
                <Col span={7}>
                  <WeaBrowser
                    type={"doccategory"}
                    // inputStyle={{ width: 200 }}
                    replaceDatas={[{ id: data.docsecid, name: data.docsecname }]}
                    onChange={(ids, names, datas) => {
                      data.docsecname = names;
                      data.docsecid = ids;
                    }}
                  />
                </Col>
              </Row>
              <Row gutter="2" style={{ margin: "5px 20px 0 10px" }}>
                <Col span={4}>开放公司目标</Col>
                <Col span={7}>
                  <WeaCheckbox
                    value={data.iscgoal}
                    display="switch"
                    id="f1"
                    style={{ display: "inline-block" }}
                    onChange={value => {
                      data.iscgoal = value;
                    }}
                  />
                </Col>
                <Col span={2}></Col>
                <Col span={4}>个人定义目标</Col>
                <Col span={7}>
                  <WeaCheckbox
                    value={data.isself}
                    display="switch"
                    id="f2"
                    style={{ display: "inline-block" }}
                    onChange={value => {
                      data.isself = value;
                    }}
                  />
                </Col>
              </Row>
              <Row gutter="2" style={{ margin: "5px 0px 0 10px" }}>
                <Col span={4}>反馈删除时间设置(分钟)</Col>
                <Col span={7}>
                <WeaInputNumber
                    value = {data.fbdeltime} 
                    onChange = {
                      (value) =>{
                        data.fbdeltime = value;
                      }
                    }
                    min = {0}
                />
                </Col>
              </Row>
            </WeaSearchGroup>
          </WeaRightMenu>
      </div>
    );
  }

  doSaveBaseSetting() {
    let { goalBaseStore } = this.props;
    let { data } = goalBaseStore;
    goalBaseStore.saveBaseSetting(data);
  }

  parseData(ids,names){
    let res = [];
    if(isEmpty(ids)){
      return res;
    }
    let id = ids.split(",");
    let name = names.split(",");
    for(let i = 0;i < id.length; i ++){
      res.push({id:id[i],name: name[i]});
    }
    return res;
  }
}
